<template>
    <el-form ref="registerRef" :model="registerform" :rules="registerRules">
        <el-form-item prop="username">
            <el-input type="username" class="elinput" size="large" placeholder="username" v-model="registerform.username"
                :prefix-icon="User" />
        </el-form-item>
        <el-form-item prop="email">
            <el-input type="email" class="elinput" size="large" placeholder="email" v-model="registerform.email"
                :prefix-icon="Message" />
        </el-form-item>
        <el-form-item prop="password">
            <el-input type="password" class="elinput" size="large" placeholder="password" v-model="registerform.password"
                :prefix-icon="Lock" />
        </el-form-item>
        <el-form-item>
            <ElButton type="default" class="register-input" @click="register_submit(registerRef)">注册</ElButton>
        </el-form-item>
    </el-form>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue';
import { RegisterReq } from '@/interface/user';
import { User, Lock, Message } from '@element-plus/icons-vue';
import { FormInstance, FormRules } from 'element-plus';

const registerform: RegisterReq = reactive({
    username: '',
    password: '',
    email: ''
});
const registerRef = ref<FormInstance>()
const registerRules: FormRules = reactive({
    username: [{ required: true, message: "账号不正确", trigger: 'blur' }, { required: true, message: "账号是小于20个字符", max: 20, trigger: 'blur' }],
    email: [{ required: true, message: "邮箱不正确", trigger: 'blur' }],
    password: [{ required: true, message: "密码正确", trigger: 'blur' }, { required: true, message: "密码是6~20位", min: 6, max: 20, trigger: 'blur' }]
})
const register_submit = (formEl: FormInstance | undefined) => {
    console.log(registerform);
    if (!formEl) {
        return false
    }
    formEl.validate((validate: boolean) => {
        // 通过校验
        if (validate) {
            console.log("准备注册")
        } else {
            return false;
        }
    })
};
</script>

<style scoped>
.elinput {
    margin-top: 30px;
}

.register-input {
    width: 100%;
    padding: 5px;
    margin-top: 20px;
    border-radius: 1px;
    border: 1px solid #ccc;
    font-family: inherit;
}
</style>